<template>
  <div class="middle">
    <div class="middlebg"></div>
    <!--头部-->
    <div class="top">
      <span class="teacherPlan">家庭作业 <i class="el-icon-arrow-right"></i></span>
      <span class="addTeacherPlan" @click="addHomework" v-if="rule==1?false:true">+发布家庭作业</span>
      <span class="back" @click="back">返回</span>
    </div>
    <el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
      <div class="boxCard">
        <!--搜索区域-->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="学年">
            <el-select placeholder="学年" v-model="selectId" clearable>
              <el-option v-for="item in schoolYearInfo" :label="item.year" :value="item.id" :key ="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级">
            <el-select placeholder="年级" v-model="classification" clearable  @change="getSearchClass($event)">
              <el-option v-for ="item in gradeInfo" :label="item.grade_title" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select placeholder="班级" clearable v-model="selectClassId">
              <el-option v-for="item in selectClass" :label="item.class_name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
        <!--表格区域-->
        <el-table :data="program_info" style="width: 100%">
          <el-table-column prop="school_year" label="学年" width="180" align="center"></el-table-column>
          <el-table-column prop="grade" label="班级" width="180" align="center"></el-table-column>
          <el-table-column prop="title" label="作业内容" width="260" align="center"></el-table-column>
          <el-table-column prop="create_time" label="发布日期" width="180" align="center"></el-table-column>
          <el-table-column label="完成情况" width="180" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.count ==scope.row.student_count" style="color: orange;">{{scope.row.count+'/'+scope.row.student_count}}</span>
              <span v-else="scope.row.count !=scope.row.student_count">{{scope.row.count+'/'+scope.row.student_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button class="lesson" type="success" plain size="mini" @click="watch(scope.row.id)">查看</el-button>
              <el-button @click="edit(scope.row.id)" type="primary" plain size="mini" onsubmit="return false;">编辑</el-button>
              <el-button v-if="scope.row.count ==scope.row.student_count" disabled @click="del(scope.row.id)" type="danger" plain size="mini">删除</el-button>
              <el-button v-else @click="del(scope.row.id)" type="danger" plain size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页功能-->
        <el-pagination
          class="fenye"
          @size-change="SizeChange"
          @current-change="currentChange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-if="program_info.length == 0? false :true">
        </el-pagination>
      </div>
      <!--发布家庭作业-->
      <el-dialog class="card" :visible.sync="homework" width="60%" center @close="closeDialog">
        <el-form>
          <div>
            <div>选择年级</div>
            <div>
              <el-radio-group v-model="radio" size="mini">
                <el-radio-button  v-for="item in grade" :label="item.id" :key="item.id" @click.native="getClass(id = item.id)">{{item.grade_title}}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div>
            <div>选择班级</div>
            <div>
              <el-checkbox-group v-model="checkboxGroup"  size="mini">
                <el-checkbox-button v-for="item in gradeClass" :label="item.id" :key="item.id">{{item.class_name}}</el-checkbox-button>
              </el-checkbox-group>
            </div>
          </div>

          <div>作业内容</div>
          <div>
            <textarea v-model="title" cols="100" rows="1" placeholder="作业标题"></textarea>
            <textarea v-model="content" cols="100" rows="10" placeholder="作业内容"></textarea>
          </div>
          <div>
            学周&nbsp;&nbsp;
            <el-select class="select" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in weeks"
                :key="item.week"
                :label="item.week"
                :value="item.week">
              </el-option>
            </el-select>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="insertHomework()">发布家庭作业</el-button>
        </div>

      </el-dialog>
      <!--编辑家庭作业-->
      <el-dialog class="card" :visible.sync="edithomework" width="60%" center>
        <el-form>
          <div>
            <div>选择年级</div>
            <div>
              <el-radio-group v-model="edit_grade" size="mini">
                <el-radio-button v-for="item in grade" :label="item.id" :key="item.id" @click.native="getEditClass(id = item.id)">{{item.grade_title}}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div>
            <div>选择班级</div>
            <div>
              <el-radio-group v-model="edit_class" size="mini">
                <el-radio-button v-for="item in editGradeClass" :label="item.id" :key="item.id">{{item.class_name}}</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div>作业内容</div>
          <div>
            <textarea v-model="edit_title" cols="100" rows="1" placeholder="作业标题"></textarea>
            <textarea v-model="edit_content" cols="100" rows="10" placeholder="作业内容"></textarea>
          </div>
          <div>
            学周&nbsp;&nbsp;
            <el-select class="select" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in weeks"
                :key="item.week"
                :label="item.week"
                :value="item.week">
              </el-option>
            </el-select>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editHomework()">发布家庭作业</el-button>
        </div>

      </el-dialog>

    </el-card>

  </div>
</template>

<script>
  export default {

    data () {
      return {
        schoolYearInfo:[],
        selectId:'',
        gradeInfo:[],
        classification:'',
        selectClass:[],
        selectClassId:'',
        grade:[],//年级
        radio:'',//年级单选
        checkboxGroup: [],//多选
        gradeClass: [],
        title:'',//标题
        content:'',//内容
        //学周下拉
        weeks: [],
        value: '',//选择的周
        complete:[],
        labelPosition: 'right',//又对其
        loading: true,
        checked: true,//选中为true
        homework:false,
        edithomework:false,
        edit_grade:'',//年级id
        edit_title:'',//作业标题
        edit_content:'',//作业内容
        editGradeClass:[],//班级信息
        edit_class:'',
        editHomework_id:'',//编辑家庭作业id
        program_info: [],//存放首页信息
        rows: 4,//每页几条
        page: 1,//当前显示页数
        pagesizes: [4, 5, 10, 15, 20],//更改每页显示条数
        total: 20,//一共多少条,
        yearType:'all',//获取学年的参数

      }
    },
    methods: {
      //获取家庭作业首页
      getHomework () {
        this.$http.post('/api/homework/homeworkList', {
          page: this.page,
          rows: this.rows,
          grade_id: this.classification,
          schoolYearId: this.selectId,
          class_id:this.selectClassId
        }).then(res => {
          this.program_info = res.data.data
          res.data.data.map(item => {
            item.complete = item.count+'/'+item.student_count
            this.complete = item.complete
            //保存教师id
            localStorage.setItem('teacher_id',item.teacher_id)

          })
          this.loading = false
          this.total = res.data.count
        })
      },
      //搜索
      onSubmit () {
        this.getHomework()
      },
      //获取学年
      getYear(){
        this.$http.post('/api/program/getSchoolYearGradeInfo',{
          type:this.yearType,
        }).then(res=>{
          this.schoolYearInfo = res.data.data.schoolYearInfo
          this.gradeInfo = res.data.data.gradeInfo
        })
      },
      //获取搜索年级对应班级
      getSearchClass(id){
        this.$http.post('/api/homework/classInfo',{
          grade_id:id,
        }).then(res=>{
          this.selectClass = res.data.data
        })
      },
      //每页显示条数
      SizeChange (val) {
        this.rows = val
        this.getHomework()
      },
      //切换第几页
      currentChange (val) {
        this.page = val
        this.getHomework()
      },
      //删除教学计划
      del (id) {
        this.$confirm('是否永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/homework/homeworkDelete', {
            id: id
          }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
              this.getHomework()
            } else{
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
        });
      },
      //获取教师管理年级
      getGrade(){
        this.$http.post('/api/common/getTeacherGrade')
          .then(res=>{
            this.grade = res.data.data
          })
      },
      //获取年级对应的班级
      getClass(id){
        this.$http.post('/api/common/getGradeClass', {
            grade_id:id
          }).then(res=>{
          this.gradeClass = res.data.data
        })
      },
      //获取学周
      getWeek(){
        this.$http.post('/api/common/getWeeks')
          .then(res=>{
           this.weeks = res.data.data
            this.value = res.data.currentWeek
          })
      },
      //返回上一页
      back () {
        this.$router.push({name: 'teaching'})
      },
      //发布家庭作业
      addHomework(){
        this.getWeek()
        this.homework = true
      },
      //作业提交
      insertHomework(){
        this.$http.post('/api/homework/insertHomework',{
          grade_id:this.radio,
          class_id:this.checkboxGroup,
          title:this.title,
          content:this.content,
          week:this.value,
        }).then(res=>{
          if(res.data.code == 200){
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.homework = false
            this.radio =''
            this.gradeClass =[]
            this.checkboxGroup =[]
            this.title=''
            this.content=''
            this.getHomework ()
          }else {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
          }
        })
      },
      //关闭窗口
      closeDialog(){
        this.radio =''
        this.gradeClass =[]
        this.checkboxGroup =[]
        this.title=''
        this.content=''
      },
      edit(id){
        this.edithomework = true
        this.$http.post('/api/homework/homeworkEdit',{
          id:id
        }).then(res=>{
          this.editGradeClass = res.data.gradeClass
          console.log(this.editGradeClass)
          this.edit_grade = res.data.info.grade_id
          this.edit_title = res.data.info.title
          this.edit_content = res.data.info.content
          this.edit_class = res.data.info.class_id
          this.editHomework_id = res.data.info.id
        })
      },
      //获取年级对应的班级
      getEditClass(id){
        this.$http.post('/api/common/getGradeClass', {
          grade_id:id
        }).then(res=>{
          this.editGradeClass = res.data.data
          console.log(this.editGradeClass)
        })
      },

      //编辑提交家庭作业
      editHomework(){
        this.$http.post('/api/homework/homeworkUpdate',{
          id:this.editHomework_id,
          grade_id:this.edit_grade,
          class_id:this.edit_class,
          week:this.value,
          title:this.edit_title,
          content:this.edit_content
        }).then(res=>{
          if(res.data.code == 200){
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.edithomework = false
            this.getHomework ()
          }else {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
          }

        })
      },
      //查看
      watch(id){
        this.$router.push({path:'watchHomework/'+id})
      },

    },
    created(){
      this.getHomework ()
      this.getYear ()
      this.getGrade()
      //获取到身份
      this.rule = localStorage.getItem('rule')

    }
  }

</script>

<style>
  .el-main {
    padding: 0;
  }
  .middle {
    height: 100%;
    width: 100%;
    background-repeat:repeat;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
  }
</style>
<style lang="less" scoped>
  .middlebg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../../assets/image/bg-img.png) no-repeat center;
    background-size: 100%;
  }
  .top {
    height: 50px;
    line-height: 50px;
    background-color: #dbdbdb;
    position: relative;
    .teacherPlan {
      display: inline-block;
      background: #00b02d;
      padding:0 15px;
      color: #fff;
    }
    .addTeacherPlan {
      display: inline-block;
      background: #3A8EE6;
      height: 24px;
      line-height: 24px;
      position: absolute;
      right: 100px;
      top: 10px;
      padding: 3px 15px;
      font-size: 14px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
    .back {
      position: absolute;
      right: 0;
      background: #9cbf83;
      padding: 0 15px;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
    }
  }
  .box-card {
    margin: 30px 50px;
    .boxCard {
      padding: 20px;
    }
    .fenye {
      margin-top: 20px;
      text-align: center;
    }
    .card {
      div:nth-child(2n-1){
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
      }
      div:nth-child(2n){
        text-align: center;
        /*班级样式*/
        /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
          color: #fff;
          background-color: #00b02d;
          border-color: #00b02d;
        }
        /deep/label.el-checkbox-button.el-checkbox-button--mini ,label.el-radio-button.el-radio-button--mini {
          padding: 0 20px;
        }
        /deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
          border-left: 1px solid #dcdfe6;
          border-radius: 0px;
          -webkit-box-shadow: none!important;
          box-shadow: none!important;
        }
        /deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
           border-radius: 0px;
        }
        /deep/.el-checkbox-button__inner{
           border: 1px solid #dcdfe6;
           background: #eee;
        }
        /*年级样式*/
        /deep/span.el-radio-button__inner {
          border: 1px solid #dcdfe6;
          background: #eee;
        }
        /deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner {
          color: #fff;
          background-color: #00b02d;
          border-color: #00b02d;

        }
        /deep/.el-radio-button:first-child .el-radio-button__inner {
          border-left: 1px solid #dcdfe6;
          border-radius: 0px;
          -webkit-box-shadow: none!important;
          box-shadow: none!important;
        }
        /deep/.el-radio-button:last-child .el-radio-button__inner {
           border-radius: 0;
        }

      }
      textarea {
        padding: 10px;
      }
      /deep/.el-dialog__body{
        padding: 0;
      }
      /deep/.el-dialog__footer{
        padding: 0;
      }
      /deep/.el-select.select {
        padding-bottom: 0;
      }
      .select {
        width: 100px;

      }
    }
  }

</style>
